<template>
	<view class="shop-list">

		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in goods" :key="item.id">

				<view class="shop-list-item" @click="navTo('/pages/shop/detail?id='+item.id)">
					<view class="image">

						<image :src="item.imgUrl[0].url" mode="widthFix" width="100"></image>
					</view>

					<view class="shop-list-content">
						<view class="title">{{item.title}}</view>
						<view>
							{{item.price}}
						</view>
					</view>
				</view>


			</u-list-item>
			<view class="list-status">
				    <view v-show="loadStatus==='more'" class="item">
						 上拉加载更多
					</view>
				    <view v-show="loadStatus==='nomore'" class="item">
						 没有更多数据了
					</view>
				    <view v-show="loadStatus==='loading'" class="item">
						 正在加载中...
					</view>
			</view>
		</u-list>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageSize: 5,
				pageNum: 1,
				// loading:false, // 是否正在加载 也就是上一次的请求还在进行中  ....
				// loaded:false,   //  是否全部加载完毕
				loadStatus: 'more', //  more  nomore   loading  
				goods: []
			}
		},
		onLoad() {
			this.get_all()
		},
		methods: {

			get_all() {
				this.loadStatus = 'loading'
				let {
					pageNum,
					pageSize
				} = this;
				uni.$u.http.get('/goods/get_all', {
					params: {
						pageNum,
						pageSize
					}
				}).then(res => {
					this.goods.push(...res)
					//  每次向服务器要10条数据  
					//   如果返回的数据不到10条  证明  没更多了 
					//  如果等于10条 那么 应该是还有  

					if (res.length < pageSize) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'more';
						this.pageNum++
					}


				})



			},
			scrolltolower() {
				let {
					loadStatus
				} = this;
				if (loadStatus === 'nomore' || loadStatus === 'loading') {
					return false
				}

				this.get_all()

			}
		}
	}
</script>

<style lang="scss">
	.shop-list {
		padding: 15rpx;

		&-item {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}

		&-content {
			flex: 1;
		}

		.title {
			font-size: 24rpx;
		}
	}

	.shop-list .image,
	.shop-list .image image {
		width: 280rpx;
	}
	
	.list-status{
		.item {
			height: 100rpx;
			@include flex;
		}
	}
</style>
